import React, { Component } from 'react';
/* import '../styles/Tabbar.css' */
import {NavLink} from 'react-router-dom'
//本地图片必须单独导入
//import pic from '../assets/2.jpg'
class Tabbar extends Component {
   /*  constructor(props){
        super(props);
        this.state={
            tabs:[
                {pic,text:'首页'},
                {pic,text:'分类'},
                {pic,text:'全部商品'},
                {pic,text:'购物车'},
                {pic,text:'个人中心'},
            ],
            currentIndex:0,//用来保存导航按钮的下标
        }
    }

    handleClick(index){
       //this.state.currentIndex = index; //这个写法可以保存数据到state,但是无法触发组件更新
       this.setState({ //setState会将传入的新的state对象和之前旧的state对象进行合并(同名属性会覆盖处理),同时setState会触发组件更新
        currentIndex:index
       },()=>{
        console.log(this.state.currentIndex);
       })

       //不能在setState的后面直接获取state中最新的值,因为setState本身是通过异步的方式来更新组件状态的,但是可以在setState的回调函数中获取(回调函数会等到组件状态更新完毕才会执行)
    }
 */
    render() {
        return (
            <div className='tabbar'>
               <NavLink to='/home'>首页</NavLink>
               <NavLink to='/cate'>分类</NavLink>
               <NavLink to='/good'>全部商品</NavLink>
               <NavLink to='shopcart'>购物车</NavLink>
               <NavLink to='/profile'>个人中心</NavLink>
               {/* {
                //渲染tabbar导航按钮
                this.state.tabs.map((item,index)=>{
                    return (
                        <div className={`tab ${this.state.currentIndex==index?'active':''}`} onClick={(e)=>{this.handleClick(index,e)}}  key={index}>
                            <img src={item.pic} alt="" />
                            <div className="text">{item.text}</div>
                        </div>
                    )
                })
               } */}
               
            </div>
        );
    }
}

export default Tabbar;